<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="50%"
    top="5vh"
  >
    <el-form
      ref="createOrEditForm"
      v-loading="loading"
      label-position="top"
      label-width="100px"
      :model="form"
      :rules="formRules"
    >
      <el-form-item :label="$t('BookStore2[\'Display:WorkTime\']')" prop="workTime">
        <el-date-picker v-model="form.workTime" type="date" value-format="yyyy-MM-dd" :placeholder="$t('BookStore2[\'Display:WorkTime\']')" style="width: 100%;" disabled />
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:UserList\']')" prop="selectedUserList">
        <div class="edit_dev">
          <el-transfer
            v-model="form.selectedUserList"
            :data="unSelectedUserList"
            :titles="[$t('BookStore2[\'Display:UnSelected\']'), $t('BookStore2[\'Display:Selected\']')]"
            filterable
          >
          </el-transfer>
        </div>
      </el-form-item>
      <!-- 隐藏表单 -->
      <el-form-item prop="workScheduleId" hidden>
        <el-input v-model="form.workScheduleId" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{ $t('BookStore2[\'Cancel\']') }}</el-button>
      <el-button type="primary" @click="submitForm">
        <i class="el-icon-check" />
        {{ $t('BookStore2[\'Save\']') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  create,
} from '@/api/workSchedule/workScheduleItem'
import { getDataDict } from '@/api/data-dict/data-dict'
import { getList as getUserList } from '@/api/administration/user/user'

export default {
  props: {
    context: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      title: '',
      loading: false,
      dataDict: {},
      userList: [],
      unSelectedUserList: [],
      form: {
        workScheduleId: '',
        selectedUserList: [],
        workTime: ''
      },
      formRules: {
      }
    }
  },
  async created() {
    this.userList = (await getUserList()).items
    if (this.userList) {
      this.userList.forEach((user, index) => {
        this.unSelectedUserList.push({
          label: user.name + ' ' + user.surname,
          key: user.id
        })
      })
    }
  },
  watch: {
    context(newVal, oldVal) {
      this.loading = true
      this.title = newVal.title
      this.$nextTick(function() {
        /* 创建模式 */
        this.form.workScheduleId = newVal.workScheduleId
        this.form.workTime = newVal.workTime
        this.loading = false
      })
    }
  },
  methods: {
    submitForm() {
      if (this.form.selectedUserList.length === 0) {
        this.$message({ message: this.$t('BookStore2[\'Display:UserListSelectedCantEmpty\']'), type: 'error' })
        return
      }
      this.$refs.createOrEditForm.validate(async(isValid, invalidFields) => {
        if (isValid) {
          var dto = []

          this.form.selectedUserList.forEach((userId, index) => {
            dto.push({
              workScheduleId: this.form.workScheduleId,
              driver: userId
            })
          })
          await create(dto)
          this.$message({ message: this.$t('BookStore2[\'Ok\']'), type: 'success' })
          this.closeDialog()
          this.$emit('saveSucceed')
        }
      })
    },
    closeDialog() {
      this.resetDialog() // 重置表单
      this.$emit('update:visible', false)
    },
    resetDialog() {
      this.$refs.createOrEditForm.resetFields()
    }
  }
}
</script>

<style scoped>
.edit_dev >>> .el-transfer-panel {
  width:300px;
}
</style>
